<template>
  <Page name="手机号码">
    <template>
      <div class="phone">
        <div class="item" >
          <span>手机号</span>
          <span >{{data.phone_area_code}} {{data.phone}}</span>
        </div>
        <div class="btn">
          <nuxt-link to="edit-phone" class="btn btn-block btn-primary">
            更换手机号
          </nuxt-link>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '~/components/page';

export default {
  components: {
    Page,
  },
  data() {
    return {
      data:{},
    }
  },
  methods: {
    async getData(){
      let { data: rs } = await this.$axios.post('?ct=api&ac=get_user');
      if(rs.code === 0){
          this.data = rs.data;
        }else{
          this.$toast(rs.msg);
        }
    }
  },
  mounted() {
    this.getData();
    this.$nextTick(()=>{
      this.userInfo = JSON.parse(localStorage.getItem("user"));
    })
  },
}
</script>

<style lang="less" scoped>
  .phone{
    .item{
      background: #fff;
      padding:0 30px;
      line-height: 100px;
      margin-top:30px;
      display: flex;
      width:100%;
      display: -webkit-flex;
      flex-direction: row;
      justify-content: space-between;
      font-size:32px;
      color:#333;
      span:last-child{
        flex: 1;
        text-align: right;
        font-size:30px;
        color:#666;
      }
    }
    div.btn{
      width:688px;
      margin:40px auto;
      display: block;
      .btn{
        border-radius: 8px;
        border:0;
      }
    }
  }
 
</style>
